<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>uAdmin - Professional, Responsive and Flat Admin Template</title>
<meta name="description" content="uAdmin is a Professional, Responsive and Flat Admin Template created by pixelcave and published on Themeforest" />
<meta name="author" content="pixelcave" />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic" />       
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/plugins.css" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="page-container">
<header class="navbar navbar-inverse">
<div class="navbar-inner remove-radius remove-box-shadow">
<div class="container-fluid">
<ul class="nav pull-right visible-phone visible-tablet">
<li class="divider-vertical remove-margin"></li>
<li>
<a href="javascript:void(0)" data-toggle="collapse" data-target=".nav-collapse">
<i class="icon-reorder"></i>
</a>
</li>
</ul>
<a href="index.php" class="brand"><img src="img/template/logo.png" alt="logo" /></a>
<div id="loading" class="hide pull-left"><i class="icon-certificate icon-spin"></i></div>
<ul id="widgets" class="nav pull-right">
<li class="divider-vertical remove-margin"></li>
<li id="rss-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-rss"></i>
<span class="badge badge-warning display-none"></span>
</a>
<ul class="dropdown-menu widget widget-fluid">
<li class="widget-heading text-center">Web Design</li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-umbrella"></i>This is a headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-trophy"></i>Another headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-suitcase"></i>Headlines keep coming!</a></li>
<li class="widget-heading text-center">Web Developent</li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-phone"></i>New headline</a></li>
<li class="divider"></li>
<li class="li-hover"><a href="javascript:void(0)" class="widget-link"><i class="icon-pencil"></i>Another one</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)" class="text-center">All News</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="twitter-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-twitter"></i>
<span class="badge badge-info display-none"></span>
</a>
<ul class="dropdown-menu widget">
<li class="widget-heading"><i class="icon-comments-alt pull-right"></i>Latest Tweets</li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Michael</a><span class="label label-info">just now</span></h6>
<div class="media">Web design all the way!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Monica</a><span class="label label-info">3 min ago</span></h6>
<div class="media">Download free PSDs at <a href="http://bit.ly/YUs4SQ" target="_blank">http://bit.ly/YUs4SQ</a></div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Steven</a><span class="label label-info">45 min ago</span></h6>
<div class="media">Be sure to check out my portfolio!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="li-hover">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_dark_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Tim</a><span class="label label-info">1 hour ago</span></h6>
<div class="media">Get all our themes for free for the next 2 hours! <a href="javascript:void(0)">#freebies</a></div>
</div>
</div>
</li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="messages-widget" class="dropdown dropdown-left-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-envelope"></i>
<span class="badge badge-success">1</span>
</a>
<ul class="dropdown-menu widget pull-right">
<li class="widget-heading"><i class="icon-comment pull-right"></i>Latest Messages</li>
<li class="new-on">
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">George</a><span class="label label-success">2 min ago</span></h6>
<div class="media">Thanks for your help! The tutorial really helped me a lot!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Mike</a><span class="label">6 hours ago</span></h6>
<div class="media">The logo is ready, have a look and let me know what you think!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="media">
<a class="pull-left" href="javascript:void(0)">
<img src="img/placeholders/image_light_64x64.png" alt="fakeimg" />
</a>
<div class="media-body">
<h6 class="media-heading"><a href="javascript:void(0)">Julia</a><span class="label">1 day ago</span></h6>
<div class="media">We should better consider our social media marketing strategy!</div>
</div>
</div>
</li>
<li class="divider"></li>
<li class="text-center"><a href="javascript:void(0)">View All Messages</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li id="notifications-widget" class="dropdown dropdown-center-responsive">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-flag"></i>
<span class="badge badge-important">1</span>
<span class="badge badge-warning">2</span>
</a>
<ul class="dropdown-menu widget">
<li class="widget-heading"><a href="javascript:void(0)" class="pull-right widget-link"><i class="icon-cog"></i></a><a href="javascript:void(0)" class="widget-link">System</a></li>
<li>
<ul>
<li class="label label-important">20 min ago</li>
<li class="text-error">Support system is down for maintenance!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-warning">3 hours ago</li>
<li class="text-warning">PHP upgrade started!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-warning">5 hours ago</li>
<li class="text-warning"><a href="javascript:void(0)" class="widget-link">1 support ticket</a> just opened!</li>
</ul>
</li>
<li class="widget-heading"><a href="javascript:void(0)" class="pull-right widget-link"><i class="icon-bookmark"></i></a><a href="javascript:void(0)" class="widget-link">Project #3</a></li>
<li>
<ul>
<li class="label label-success">3 weeks ago</li>
<li class="text-success">Project #3 <a href="javascript:void(0)" class="widget-link">published</a> successfully!</li>
</ul>
</li>
<li>
<ul>
<li class="label label-info">1 month ago</li>
<li class="text-info">Milestone #3 achieved!</li>
<li class="text-info"><a href="javascript:void(0)" class="widget-link">John Doe</a> joined the project!</li>
</ul>
</li>
<li>
<ul>
<li class="label">1 year ago</li>
<li class="text-muted">This is an old notification</li>
</ul>
</li>
<li class="divider"></li>
<li class="text-center"><a href="javascript:void(0)">View All Notifications</a></li>
</ul>
</li>
<li class="divider-vertical remove-margin"></li>
<li class="dropdown dropdown-user">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><img src="img/template/avatar.png" alt="avatar" /> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0)" class="loading-on"><i class="icon-refresh"></i> Refresh</a>
</li>
<li class="divider"></li>
<li>
<a href="#modal-user-settings" role="button" data-toggle="modal"><i class="icon-user"></i> User Profile</a>
</li>
<li>
<a href="javascript:void(0)"><i class="icon-wrench"></i> App Settings</a>
</li>
<li class="divider"></li>
<li>
<a href="page_login.php"><i class="icon-lock"></i> Log out</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<div id="inner-container"><aside id="page-sidebar" class="nav-collapse collapse">
<form id="sidebar-search" method="post" onsubmit="return false;" />
<div class="input-append">
<input type="text" placeholder="Search.." class="remove-box-shadow remove-transition remove-radius" />
<button><i class="icon-search"></i></button>
</div>
</form>
<nav id="primary-nav">
<ul>
<li>
<a href="index.php"><i class="icon-fire"></i>Dashboard</a>
</li>
<li class="active">
<a href="#"><i class="icon-magic"></i>UI Elements</a>
<ul>
<li>
<a href="page_ui_general.php" class="active"><i class="icon-star"></i>General</a>
</li>
<li>
<a href="page_forms.php"><i class="icon-th-list"></i>Forms</a>
</li>
<li>
<a href="page_tables.php"><i class="icon-table"></i>Tables</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="icon-leaf"></i>Components</a>
<ul>
<li>
<a href="page_charts.php"><i class="icon-bar-chart"></i>Charts</a>
</li>
<li>
<a href="page_calendar.php"><i class="icon-calendar"></i>Calendar</a>
</li>
<li>
<a href="page_datatables.php"><i class="icon-th"></i>DataTables</a>
</li>
</ul>
</li>
<li>
<a href="page_typography.php"><i class="icon-font"></i>Typography</a>
</li>
<li>
<a href="page_gallery.php"><i class="icon-picture"></i>Gallery</a>
</li>
<li>
<a href="#"><i class="icon-tint"></i>Icons</a>
<ul>
<li>
<a href="page_fontawesome.php">FontAwesome</a>
</li>
<li>
<a href="page_gemicon.php">Gemicon</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="icon-file-alt"></i>Pages</a>
<ul>
<li>
<a href="page_profile.php">Profile</a>
</li>
<li>
<a href="page_faq.php">Faq</a>
</li>
<li>
<a href="page_errors.php">Errors</a>
</li>
<li>
<a href="page_blank.php">Blank</a>
</li>
</ul>
</li>
<li>
<a href="page_login.php"><i class="icon-off"></i>Login Page</a>
</li>
</ul>
</nav>
</aside><div id="page-content">
<ul id="nav-info" class="clearfix">
<li><a href="index.php"><i class="icon-home"></i></a></li>
<li><a href="javascript:void(0)">UI Elements</a></li>
<li class="active"><a href="">General</a></li>
</ul>
<h3 class="page-header page-header-top">Buttons + Dropdown Menus</h3>
<h4 class="sub-header">Buttons <small>You can have all kinds of buttons with different colors and sizes like shown on the following examples</small></h4>
<div class="row-fluid">
<div class="span6">
<h4>Simple Buttons</h4>
<table class="table table-borderless">
<tbody>
<tr>
<td class="span3"><code>.btn</code></td>
<td><button type="button" class="btn">Default</button></td>
</tr>
<tr>
<td class="span3"><code>.btn</code> <code>.btn-primary</code></td>
<td><button type="button" class="btn btn-primary">Primary</button></td>
</tr>
<tr>
<td class="span3"><code>.btn</code> <code>.btn-success</code></td>
<td><button type="button" class="btn btn-success">Success</button></td>
</tr>
<tr>
<td class="span3"><code>.btn</code> <code>.btn-danger</code></td>
<td><button type="button" class="btn btn-danger">Danger</button></td>
</tr>
<tr>
<td class="span3"><code>.btn</code> <code>.btn-warning</code></td>
<td><button type="button" class="btn btn-warning">Warning</button></td>
</tr>
<tr>
<td class="span3"><code>.btn</code> <code>.btn-info</code></td>
<td><button type="button" class="btn btn-info">Info</button></td>
</tr>
<tr>
<td class="span3"><code>.btn</code> <code>.btn-inverse</code></td>
<td><button type="button" class="btn btn-inverse">Inverse</button></td>
</tr>
<tr>
<td class="span3"><code>.btn</code> <code>.btn-link</code></td>
<td><button type="button" class="btn btn-link">Link</button></td>
</tr>
<tr>
<td class="span3"><code>.btn</code> <code>.disabled</code></td>
<td>
<a class="btn disabled" href="javascript:void(0)">Link</a>
<button class="btn disabled" type="submit" disabled="">Button</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="span6">
<h4>Sizes</h4>
<table class="table table-borderless">
<tbody>
<tr>
<td class="span4"><code>.btn</code> <code>.btn-mini</code></td>
<td>
<button type="button" class="btn btn-mini">Default</button>
</td>
</tr>
<tr>
<td class="span4"><code>.btn</code> <code>.btn-small</code></td>
<td>
<button type="button" class="btn btn-small">Default</button>
</td>
</tr>
<tr>
<td class="span4"><code>.btn</code> <code>.btn-large</code></td>
<td>
<button type="button" class="btn btn-large">Default</button>
</td>
</tr>
<tr>
<td class="span4"><code>.btn</code> <code>.btn-mini</code> <code>.btn-success</code></td>
<td>
<button type="button" class="btn btn-mini btn-success">Success</button>
</td>
</tr>
<tr>
<td class="span4"><code>.btn</code> <code>.btn-small</code> <code>.btn-success</code></td>
<td>
<button type="button" class="btn btn-small btn-success">Default</button>
</td>
</tr>
<tr>
<td class="span4"><code>.btn</code> <code>.btn-large</code> <code>.btn-success</code></td>
<td>
<button type="button" class="btn btn-large btn-success">Default</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h4 class="sub-header">Buttons Group & Dropdowns</h4>
<div class="well push">
<p>Use buttons inside a div with <code>.btn-group</code> class to create a group</p>
<div class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
</div>
<div class="well push">
<p>Add the extra <code>.btn-group-vertical</code> class for a vertical group</p>
<div class="btn-group btn-group-vertical">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
</div>
</div>
<div class="well push">
<p>Use any button within a <code>.btn-group</code> and the proper dropdown<br />menu markup to trigger it. Dropdown menus have many options<br />such as disabled links, second level menus or split buttons</p>
<div class="btn-group hidden-phone">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">Extra options <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">First link</a></li>
<li><a href="javascript:void(0)">Second link</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Another link</a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">Action <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">First link</a></li>
<li class="disabled"><a href="javascript:void(0)">This is a disabled link</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="javascript:void(0)">More options</a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">First link</a></li>
<li><a href="javascript:void(0)">Second link</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Another link</a></li>
</ul>
</li>
</ul>
</div>
<div class="btn-group dropup">
<a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)"><i class="icon-beer"></i> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">First link</a></li>
<li class="disabled"><a href="javascript:void(0)">This is a disabled link</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="javascript:void(0)">More options</a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">First link</a></li>
<li><a href="javascript:void(0)">Second link</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Another link</a></li>
</ul>
</li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-success"><i class="gemicon-small-gear1 gemicon-small-white"></i></a>
<a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">First link</a></li>
<li class="disabled"><a href="javascript:void(0)">This is a disabled link</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="javascript:void(0)">More options</a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">First link</a></li>
<li><a href="javascript:void(0)">Second link</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Another link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="well push">
<p>Combine sets of divs with <code>.btn-group</code> classes inside<br /> a div with <code>.btn-toolbar</code> class to create a toolbar!<br />Remember that you can use any icon, color or size you want!</p>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-mini"><i class="icon-file"></i></button>
<button class="btn btn-mini"><i class="icon-save"></i></button>
</div>
<div class="btn-group">
<button class="btn btn-mini"><i class="icon-cut"></i></button>
<button class="btn btn-mini"><i class="icon-copy"></i></button>
<button class="btn btn-mini"><i class="icon-paste"></i></button>
</div>
<div class="btn-group">
<button class="btn btn-mini"><i class="icon-bold"></i></button>
<button class="btn btn-mini"><i class="icon-italic"></i></button>
<button class="btn btn-mini"><i class="icon-underline"></i></button>
<button class="btn btn-mini"><i class="icon-strikethrough"></i></button>
</div>
</div>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-warning"><i class="icon-align-left"></i></button>
<button class="btn btn-warning"><i class="icon-align-center"></i></button>
<button class="btn btn-warning"><i class="icon-align-right"></i></button>
</div>
<div class="btn-group">
<button class="btn btn-info"><i class="icon-indent-left"></i></button>
<button class="btn btn-info"><i class="icon-indent-right"></i></button>
</div>
<div class="btn-group hidden-phone">
<button class="btn btn-success"><i class="icon-list-ul"></i></button>
<button class="btn btn-success"><i class="icon-list-ol"></i></button>
<button class="btn btn-success"><i class="icon-table"></i></button>
</div>
<div class="btn-group hidden-phone">
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">First link</a></li>
<li><a href="javascript:void(0)">Second link</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Another link</a></li>
</ul>
</div>
</div>
</div>
<h3 class="page-header">Navigation Elements <small>Navs, Navbar, Breadcrumbs, Pagination, Tabs and Accordion</small></h3>
<h4 class="sub-header">Navs <small>Navs are created with <code>&lt;ul&gt;</code> lists. Just add the right class and the list will formatted accordingly!</small></h4>
<div class="push">
<p class="well"><code>.nav</code> <code>.nav-tabs</code></p>
<ul class="nav nav-tabs">
<li class="active"><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Profile</a></li>
<li><a href="javascript:void(0)">Settings</a></li>
</ul>
</div>
<div class="push">
<p class="well"><code>.nav</code> <code>.nav-pills</code></p>
<ul class="nav nav-pills">
<li class="active"><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Profile</a></li>
<li><a href="javascript:void(0)">Settings</a></li>
<li class="disabled"><a href="javascript:void(0)">Disabled</a></li>
</ul>
</div>
<div class="push">
<p class="well"><code>.nav</code> <code>.nav-tabs</code> <code>.nav-stacked</code></p>
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Profile</a></li>
<li><a href="javascript:void(0)">Settings</a></li>
</ul>
</div>
<div class="push">
<p class="well"><code>.nav</code> <code>.nav-pills</code> <code>.nav-stacked</code></p>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Profile</a></li>
<li><a href="javascript:void(0)">Settings</a></li>
<li class="disabled"><a href="javascript:void(0)">Disabled</a></li>
</ul>
</div>
<h4 class="sub-header">Navbar</h4>
<div class="navbar">
<div class="navbar-inner remove-radius remove-box-shadow">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="javascript:void(0)">Logo</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active"><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Profile</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Settings <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li class="divider"></li>
<li class="nav-header">Extra</li>
<li><a href="javascript:void(0)">First Link</a></li>
<li><a href="javascript:void(0)">Second Link</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="page_ui_general.php" />
<input type="text" class="search-query span2" placeholder="Search" />
</form>
<ul class="nav pull-right">
<li><a href="javascript:void(0)"><i class="icon-umbrella"></i></a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Action #2</a></li>
<li><a href="javascript:void(0)">Action #3</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse">
<div class="navbar-inner remove-radius remove-box-shadow">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="javascript:void(0)">Logo</a>
<div class="nav-collapse collapse navbar-responsive-collapse2">
<ul class="nav">
<li class="active"><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Profile</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Settings <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Another action</a></li>
<li class="divider"></li>
<li class="nav-header">Extra</li>
<li><a href="javascript:void(0)">First Link</a></li>
<li><a href="javascript:void(0)">Second Link</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="page_ui_general.php" />
<input type="text" class="search-query span2" placeholder="Search" />
</form>
<ul class="nav pull-right">
<li><a href="javascript:void(0)"><i class="icon-umbrella"></i></a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">Action</a></li>
<li><a href="javascript:void(0)">Action #2</a></li>
<li><a href="javascript:void(0)">Action #3</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<h4 class="sub-header">Breadcrumbs <small>A <code>&lt;ul&gt;</code> list can easily become a breadcrumb</small></h4>
<div class="push">
<p class="well"><code>.breadcrumb</code></p>
<ul class="breadcrumb">
<li><a href="javascript:void(0)">Home</a> <span class="divider"><i class="icon-chevron-right"></i></span></li>
<li><a href="javascript:void(0)">Settings</a> <span class="divider"><i class="icon-chevron-right"></i></span></li>
<li class="active">Profile</li>
</ul>
</div>
<h4 class="sub-header">Pagination <small>Just a <code>&lt;div&gt;</code> with <code>.pagination</code> class and a <code>&lt;ul&gt;</code> list inside (pager excluded)</small></h4>
<div class="push">
<p class="well">Standard Pagination</p>
<div class="pagination">
<ul>
<li><a href="javascript:void(0)">Prev</a></li>
<li><a href="javascript:void(0)">1</a></li>
<li><a href="javascript:void(0)">2</a></li>
<li><a href="javascript:void(0)">3</a></li>
<li><a href="javascript:void(0)">Next</a></li>
</ul>
</div>
</div>
<div class="push">
<p class="well">Active and disabled states</p>
<div class="pagination">
<ul>
<li class="disabled"><a href="javascript:void(0)">Prev</a></li>
<li><a href="javascript:void(0)">1</a></li>
<li class="active"><a href="javascript:void(0)">2</a></li>
<li><a href="javascript:void(0)">3</a></li>
<li><a href="javascript:void(0)">Next</a></li>
</ul>
</div>
</div>
<div class="push">
<p class="well">Add an extra class for different sizes <code>.pagination-large</code> <code>.pagination-small</code> <code>.pagination-mini</code></p>
<div class="pagination pagination-large">
<ul>
<li><a href="javascript:void(0)">Prev</a></li>
<li><a href="javascript:void(0)">1</a></li>
<li><a href="javascript:void(0)">2</a></li>
<li><a href="javascript:void(0)">3</a></li>
<li><a href="javascript:void(0)">Next</a></li>
</ul>
</div>
<div class="pagination pagination-small">
<ul>
<li><a href="javascript:void(0)">Prev</a></li>
<li><a href="javascript:void(0)">1</a></li>
<li><a href="javascript:void(0)">2</a></li>
<li><a href="javascript:void(0)">3</a></li>
<li><a href="javascript:void(0)">Next</a></li>
</ul>
</div>
<div class="pagination pagination-mini">
<ul>
<li><a href="javascript:void(0)">Prev</a></li>
<li><a href="javascript:void(0)">1</a></li>
<li><a href="javascript:void(0)">2</a></li>
<li><a href="javascript:void(0)">3</a></li>
<li><a href="javascript:void(0)">Next</a></li>
</ul>
</div>
</div>
<div class="push">
<p class="well">Add an extra class for different alignments <code>.pagination-centered</code> <code>.pagination-right</code></p>
<div class="pagination">
<ul>
<li><a href="javascript:void(0)">Prev</a></li>
<li><a href="javascript:void(0)">1</a></li>
<li><a href="javascript:void(0)">2</a></li>
<li><a href="javascript:void(0)">3</a></li>
<li><a href="javascript:void(0)">Next</a></li>
</ul>
</div>
<div class="pagination pagination-centered">
<ul>
<li><a href="javascript:void(0)">Prev</a></li>
<li><a href="javascript:void(0)">1</a></li>
<li><a href="javascript:void(0)">2</a></li>
<li><a href="javascript:void(0)">3</a></li>
<li><a href="javascript:void(0)">Next</a></li>
</ul>
</div>
<div class="pagination pagination-right">
<ul>
<li><a href="javascript:void(0)">Prev</a></li>
<li><a href="javascript:void(0)">1</a></li>
<li><a href="javascript:void(0)">2</a></li>
<li><a href="javascript:void(0)">3</a></li>
<li><a href="javascript:void(0)">Next</a></li>
</ul>
</div>
</div>
<div class="push">
<p class="well">Pager for simple pagination. A <code>&lt;ul&gt;</code> will <code>.pager</code> class</p>
<ul class="pager">
<li class="previous"><a href="javascript:void(0)"><i class="icon-arrow-left"></i> Prev</a></li>
<li class="next"><a href="javascript:void(0)">Next <i class="icon-arrow-right"></i></a></li>
</ul>
<ul class="pager">
<li class="previous"><a href="javascript:void(0)">Prev</a></li>
<li class="next"><a href="javascript:void(0)">Next</a></li>
</ul>
<ul class="pager">
<li class="previous"><a href="javascript:void(0)"><i class="icon-arrow-left"></i></a></li>
<li class="next"><a href="javascript:void(0)"><i class="icon-arrow-right"></i></a></li>
</ul>
</div>
<h4 class="sub-header">Tabs</h4>
<div class="row-fluid">
<div class="span4 clearfix">
<h4>Aligned left</h4>
<div class="tabs-left">
<ul class="nav nav-tabs" id="example-tabs">
<li class="active"><a href="#example-tabs-home">Home</a></li>
<li><a href="#example-tabs-profile">Profile</a></li>
<li><a href="#example-tabs-messages">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="example-tabs-home">Home Content!</div>
<div class="tab-pane" id="example-tabs-profile">Profile Content!</div>
<div class="tab-pane" id="example-tabs-messages">Messages Content!</div>
</div>
</div>
</div>
<div class="span4 clearfix">
<h4>Normal</h4>
<ul class="nav nav-tabs" id="example-tabs2">
<li class="active"><a href="#example-tabs2-home">Home</a></li>
<li><a href="#example-tabs2-profile">Profile</a></li>
<li><a href="#example-tabs2-messages">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="example-tabs2-home">Home Content!</div>
<div class="tab-pane" id="example-tabs2-profile">Profile Content!</div>
<div class="tab-pane" id="example-tabs2-messages">Messages Content!</div>
</div>
</div>
<div class="span4 clearfix">
<h4>Aligned Right</h4>
<div class="tabs-right">
<ul class="nav nav-tabs" id="example-tabs3">
<li class="active"><a href="#example-tabs3-home">Home</a></li>
<li><a href="#example-tabs3-profile">Profile</a></li>
<li><a href="#example-tabs3-messages">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="example-tabs3-home">Home Content!</div>
<div class="tab-pane" id="example-tabs3-profile">Profile Content!</div>
<div class="tab-pane" id="example-tabs3-messages">Messages Content!</div>
</div>
</div>
</div>
</div>
<h4 class="sub-header">Accordion</h4>
<div class="accordion" id="example-accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#example-accordion" href="#example-accordion-content1">Option 1</a>
</div>
<div id="example-accordion-content1" class="accordion-body collapse in">
<div class="accordion-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate. Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit. Ut egestas tempor est, in cursus enim venenatis eget! Nulla quis ligula ipsum. Donec vitae ultrices dolor?</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#example-accordion" href="#example-accordion-content2">Option 2</a>
</div>
<div id="example-accordion-content2" class="accordion-body collapse">
<div class="accordion-inner">Donec lacinia venenatis metus at bibendum? In hac habitasse platea dictumst. Proin ac nibh rutrum lectus rhoncus eleifend. Sed porttitor pretium venenatis. Suspendisse potenti. Aliquam quis ligula elit. Aliquam at orci ac neque semper dictum. Sed tincidunt scelerisque ligula, et facilisis nulla hendrerit non. Suspendisse potenti. Pellentesque non accumsan orci. Praesent at lacinia dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#example-accordion" href="#example-accordion-content3">Option 3</a>
</div>
<div id="example-accordion-content3" class="accordion-body collapse">
<div class="accordion-inner">Content!</div>
</div>
</div>
</div>
<h3 class="page-header">Alerts</h3>
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Success!</strong> The task was completed!
</div>
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Info!</strong> This is a message just to let you know!
</div>
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Error!</strong> Ohh, no.. The system failed us!
</div>
<div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Be careful, a lot can happen with these options!
</div>
<h3 class="page-header">Progress Bars</h3>
<table class="table table-borderless">
<tbody>
<tr>
<td class="span2">
<button id="example-progress-bar-button" type="button" class="btn btn-success" data-loading-text="Working..">
<i class="icon-play"></i> Demo
</button>
</td>
<td>
<div id="example-progress-bar" class="progress">
<div class="bar bar-danger"></div>
</div>
</td>
</tr>
<tr>
<td class="span2">Default style</td>
<td>
<div class="progress">
<div class="bar" style="width: 15%">15%</div>
</div>
<div class="progress progress-info">
<div class="bar" style="width: 30%">30%</div>
</div>
<div class="progress progress-success">
<div class="bar" style="width: 45%">45%</div>
</div>
<div class="progress progress-warning">
<div class="bar" style="width: 60%">60%</div>
</div>
<div class="progress progress-danger">
<div class="bar" style="width: 75%">75%</div>
</div>
</td>
</tr>
<tr>
<td class="span2">Mini</td>
<td>
<div class="progress progress-mini">
<div class="bar" style="width: 15%"></div>
</div>
<div class="progress progress-mini progress-info">
<div class="bar" style="width: 30%"></div>
</div>
<div class="progress progress-mini progress-success">
<div class="bar" style="width: 45%"></div>
</div>
<div class="progress progress-mini progress-warning">
<div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-mini progress-danger">
<div class="bar" style="width: 75%"></div>
</div>
</td>
</tr>
<tr>
<td class="span2">With stripes</td>
<td>
<div class="progress progress-striped">
<div class="bar" style="width: 15%">15%</div>
</div>
<div class="progress progress-striped progress-info">
<div class="bar" style="width: 30%">30%</div>
</div>
<div class="progress progress-striped progress-success">
<div class="bar" style="width: 45%">45%</div>
</div>
<div class="progress progress-striped progress-warning">
<div class="bar" style="width: 60%">60%</div>
</div>
<div class="progress progress-striped progress-danger">
<div class="bar" style="width: 75%">75%</div>
</div>
</td>
</tr>
<tr>
<td class="span2">Animated stripes (on modern browsers)</td>
<td>
<div class="progress progress-striped active">
<div class="bar" style="width: 15%">Loading..</div>
</div>
<div class="progress progress-striped progress-info active">
<div class="bar" style="width: 30%">Loading..</div>
</div>
<div class="progress progress-striped progress-success active">
<div class="bar" style="width: 45%">Loading..</div>
</div>
<div class="progress progress-striped progress-warning active">
<div class="bar" style="width: 60%">Loading..</div>
</div>
<div class="progress progress-striped progress-danger active">
<div class="bar" style="width: 75%">Loading..</div>
</div>
</td>
</tr>
<tr>
<td class="span2">Stacked bars</td>
<td>
<div class="progress">
<div class="bar" style="width: 15%;">15%</div>
<div class="bar bar-info" style="width: 15%;">15%</div>
<div class="bar bar-success" style="width: 30%;">30%</div>
<div class="bar bar-warning" style="width: 10%;">10%</div>
<div class="bar bar-danger" style="width: 10%;">10%</div>
</div>
<div class="progress progress-striped">
<div class="bar" style="width: 15%;">15%</div>
<div class="bar bar-info" style="width: 15%;">15%</div>
<div class="bar bar-success" style="width: 30%;">30%</div>
<div class="bar bar-warning" style="width: 10%;">10%</div>
<div class="bar bar-danger" style="width: 10%;">10%</div>
</div>
<div class="progress progress-striped active">
<div class="bar" style="width: 15%;">15%</div>
<div class="bar bar-info" style="width: 15%;">15%</div>
<div class="bar bar-success" style="width: 30%;">30%</div>
<div class="bar bar-warning" style="width: 10%;">10%</div>
<div class="bar bar-danger" style="width: 10%;">10%</div>
</div>
</td>
</tr>
</tbody>
</table>
<h3 class="page-header">Loaders <small>Use one of the 12 loading gifs or make any FontAwesome icon spin (on modern browsers)!</small></h3>
<div class="row-fluid">
<div class="span6">
<h4 class="sub-header">Gifs</h4>
<table class="table table-borderless">
<tbody>
<tr>
<td><code>.loader-01</code></td>
<td><span class="loader-01"></span></td>
<td><code>.loader-07</code></td>
<td><span class="loader-07"></span></td>
</tr>
<tr>
<td><code>.loader-02</code></td>
<td><span class="loader-02"></span></td>
<td><code>.loader-08</code></td>
<td><span class="loader-08"></span></td>
</tr>
<tr>
<td><code>.loader-03</code></td>
<td><span class="loader-03"></span></td>
<td><code>.loader-09</code></td>
<td><span class="loader-09"></span></td>
</tr>
<tr>
<td><code>.loader-04</code></td>
<td><span class="loader-04"></span></td>
<td><code>.loader-10</code></td>
<td><span class="loader-10"></span></td>
</tr>
<tr>
<td><code>.loader-05</code></td>
<td><span class="loader-05"></span></td>
<td><code>.loader-11</code></td>
<td><span class="loader-11"></span></td>
</tr>
<tr>
<td><code>.loader-06</code></td>
<td><span class="loader-06"></span></td>
<td><code>.loader-12</code></td>
<td><span class="loader-12"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="span5 offset1">
<h4 class="sub-header">FontAwesome <small><code>.icon-spin</code> to any icon!</small></h4>
<table class="table table-borderless">
<tbody>
<tr>
<td><code>.icon-spin</code> <code>.icon-asterisk</code></td>
<td><i class="icon-asterisk icon-spin"></i></td>
</tr>
<tr>
<td><code>.icon-spin</code> <code>.icon-spinner</code></td>
<td><i class="icon-spinner icon-spin"></i></td>
</tr>
<tr>
<td><code>.icon-spin</code> <code>.icon-spinner</code> <code>.icon-2x</code></td>
<td><i class="icon-spinner icon-spin icon-2x"></i></td>
</tr>
<tr>
<td><code>.icon-spin</code> <code>.icon-spinner</code> <code>.icon-4x</code></td>
<td><i class="icon-spinner icon-spin icon-4x"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
<h3 class="page-header">Popovers, Tooltips &amp; Modals</h3>
<div class="row-fluid">
<div class="span5">
<h4 class="sub-header">Popovers</h4>
<button class="btn btn-success" data-toggle="popover" data-content="This is an information popup! Use it easy with the content you want!" title="Popover!">Popover</button>
<button class="btn hidden-phone hidden-tablet" data-toggle="popover" data-content="This is an information popover! Use it easily with the content you want!" data-placement="top" title="Popover on top!"><i class="icon-arrow-up"></i></button>
<button class="btn hidden-phone hidden-tablet" data-toggle="popover" data-content="This is an information popover! Use it easily with the content you want!" data-placement="right" title="Popover on right!"><i class="icon-arrow-right"></i></button>
<button class="btn hidden-phone hidden-tablet" data-toggle="popover" data-content="This is an information popover! Use it easily with the content you want!" data-placement="bottom" title="Popover on bottom!"><i class="icon-arrow-down"></i></button>
<button class="btn hidden-phone hidden-tablet" data-toggle="popover" data-content="This is an information popover! Use it easily with the content you want!" data-placement="left" title="Popover on left!"><i class="icon-arrow-left"></i></button>
</div>
<div class="span4">
<h4 class="sub-header">Tooltips</h4>
<a href="javascript:void(0)" data-toggle="tooltip" title="General tooltip!">Tooltip</a><br /><br />
<a href="javascript:void(0)" class="hidden-phone hidden-tablet" data-toggle="tooltip" data-placement="top" title="Tooltip on top!">Tooltip Top</a><br />
<a href="javascript:void(0)" class="hidden-phone hidden-tablet" data-toggle="tooltip" data-placement="right" title="Tooltip on right!">Tooltip Right</a><br />
<a href="javascript:void(0)" class="hidden-phone hidden-tablet" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom!">Tooltip Bottom</a><br />
<a href="javascript:void(0)" class="hidden-phone hidden-tablet" data-toggle="tooltip" data-placement="left" title="Tooltip on left!">Tooltip Left</a><br />
</div>
<div class="span3">
<h4 class="sub-header">Modals</h4>
<a href="#example-modal" class="btn" data-toggle="modal">Launch demo modal</a>
<div id="example-modal" class="modal hide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Modal Heading</h4>
</div>
<div class="modal-body">
<p>Modal Content..</p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal">Close</button>
<button class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
<h3 class="page-header">Carousel</h3>
<div class="row-fluid">
<div class="span6">
<div id="example-carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#example-carousel" data-slide-to="0" class="active"></li>
<li data-target="#example-carousel" data-slide-to="1"></li>
<li data-target="#example-carousel" data-slide-to="2"></li>
<li data-target="#example-carousel" data-slide-to="3"></li>
<li data-target="#example-carousel" data-slide-to="4"></li>
<li data-target="#example-carousel" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="active item">
<img src="img/placeholders/image_dark_900x700.png" alt="fakeimg" />
<div class="carousel-caption text-left">
<h4>Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida.</p>
</div>
</div>
<div class="item">
<img src="img/placeholders/image_light_900x700.png" alt="fakeimg" />
<div class="carousel-caption text-left">
<h4>Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida.</p>
</div>
</div>
<div class="item">
<img src="img/placeholders/image_dark_900x700.png" alt="fakeimg" />
<div class="carousel-caption text-left">
<h4>Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida.</p>
</div>
</div>
<div class="item">
<img src="img/placeholders/image_light_900x700.png" alt="fakeimg" />
<div class="carousel-caption text-left">
<h4>Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida.</p>
</div>
</div>
<div class="item">
<img src="img/placeholders/image_dark_900x700.png" alt="fakeimg" />
<div class="carousel-caption text-left">
<h4>Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida.</p>
</div>
</div>
<div class="item">
<img src="img/placeholders/image_light_900x700.png" alt="fakeimg" />
<div class="carousel-caption text-left">
<h4>Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida.</p>
</div>
</div>
</div>
<a class="carousel-control left" href="#example-carousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#example-carousel" data-slide="next">&rsaquo;</a>
</div>
</div>
<div class="span6">
<div id="example-carousel2" class="carousel">
<ol class="carousel-indicators">
<li data-target="#example-carousel2" data-slide-to="0" class="active"></li>
<li data-target="#example-carousel2" data-slide-to="1"></li>
<li data-target="#example-carousel2" data-slide-to="2"></li>
<li data-target="#example-carousel2" data-slide-to="3"></li>
<li data-target="#example-carousel2" data-slide-to="4"></li>
<li data-target="#example-carousel2" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="active item">
<img src="img/placeholders/image_dark_900x700.png" alt="fakeimg" />
<div class="carousel-caption text-left">
<h4>Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida.</p>
</div>
</div>
<div class="item">
<img src="img/placeholders/image_light_900x700.png" alt="fakeimg" />
<div class="carousel-caption text-left">
<h4>Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida.</p>
</div>
</div>
<div class="item">
<img src="img/placeholders/image_dark_900x700.png" alt="fakeimg" />
<div class="carousel-caption text-left">
<h4>Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida.</p>
</div>
</div>
<div class="item">
<img src="img/placeholders/image_light_900x700.png" alt="fakeimg" />
<div class="carousel-caption text-left">
<h4>Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida.</p>
</div>
</div>
<div class="item">
<img src="img/placeholders/image_dark_900x700.png" alt="fakeimg" />
<div class="carousel-caption text-left">
<h4>Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida.</p>
</div>
</div>
<div class="item">
<img src="img/placeholders/image_light_900x700.png" alt="fakeimg" />
<div class="carousel-caption text-left">
<h4>Caption</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida.</p>
</div>
</div>
</div>
<a class="carousel-control left" href="#example-carousel2" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#example-carousel2" data-slide="next">&rsaquo;</a>
</div>
</div>
</div>
</div>
<footer>
<script>var d = new Date(); if (d.getFullYear() === 2013) { document.write('2013'); } else { document.write('2013-' + d.getFullYear()); }</script> &copy; <strong>uAdmin 1.0</strong> - Crafted with <i class="icon-heart"></i> by <strong><a href="http://themeforest.net/user/pixelcave/portfolio?ref=pixelcave" target="_blank">pixelcave</a></strong>
</footer>
</div>
</div>
<a href="#" id="to-top"><i class="icon-chevron-up"></i></a>
<div id="modal-user-settings" class="modal hide">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Profile Settings</h4>
</div>
<div class="modal-body">
<ul id="example-user-tabs" class="nav nav-tabs">
<li class="active"><a href="#example-user-tabs-account"><i class="icon-cogs"></i> Account</a></li>
<li><a href="#example-user-tabs-profile"><i class="icon-user"></i> Profile</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="example-user-tabs-account">
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Success!</strong> Password changed!
</div>
<form class="form-horizontal" />
<div class="control-group">
<label class="control-label" for="example-user-username">Username</label>
<div class="controls">
<input type="text" id="example-user-username" class="disabled" value="administrator" disabled="" />
<span class="help-block">You can't change your username!</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-pass">Password</label>
<div class="controls">
<input type="password" id="example-user-pass" />
<span class="help-block">if you want to change your password enter your current for confirmation!</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-newpass">New Password</label>
<div class="controls">
<input type="password" id="example-user-newpass" />
</div>
</div>
</form>
</div>
<div class="tab-pane" id="example-user-tabs-profile">
<h5 class="page-header-sub hidden-phone">Image</h5>
<div class="form-horizontal hidden-phone">
<div class="control-group">
<img src="img/placeholders/image_dark_120x120.png" alt="image" />
</div>
<div class="control-group">
<form action="index.php" class="dropzone" />
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
</div>
</div>
<form class="form-horizontal" />
<h5 class="page-header-sub">Details</h5>
<div class="control-group">
<label class="control-label" for="example-user-firstname">Firstname</label>
<div class="controls">
<input type="text" id="example-user-firstname" value="John" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-lastname">Lastname</label>
<div class="controls">
<input type="text" id="example-user-lastname" value="Doe" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-gender">Gender</label>
<div class="controls">
<select id="example-user-gender">
<option />Male
<option />Female
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-birthdate">Birthdate</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-birthdate" class="input-small input-datepicker" />
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-skills">Skills</label>
<div class="controls">
<select id="example-user-skills" multiple="multiple" class="select-chosen">
<option selected="" />html
<option selected="" />css
<option />javascript
<option />php
<option />mysql
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-bio">Bio</label>
<div class="controls">
<textarea id="example-user-bio" class="textarea-elastic" rows="3">Bio Information..</textarea>
</div>
</div>
<h5 class="page-header-sub">Social</h5>
<div class="control-group">
<label class="control-label" for="example-user-fb">Facebook</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-fb" />
<span class="add-on"><i class="icon-facebook"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-twitter">Twitter</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-twitter" />
<span class="add-on"><i class="icon-twitter"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-pinterest">Pinterest</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-pinterest" />
<span class="add-on"><i class="icon-pinterest"></i></span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="example-user-github">Github</label>
<div class="controls">
<div class="input-append">
<input type="text" id="example-user-github" />
<span class="add-on"><i class="icon-github"></i></span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal"><i class="icon-remove"></i> Close</button>
<button class="btn btn-success"><i class="icon-spinner icon-spin"></i> Save changes</button>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/vendor/jquery-1.8.3.min.js"%3E%3C/script%3E'));</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script><script>
$(function(){$("#example-tabs a").click(function(e){e.preventDefault();$(this).tab("show")});$("#example-tabs2 a").click(function(e){e.preventDefault();$(this).tab("show")});$("#example-tabs3 a").click(function(e){e.preventDefault();$(this).tab("show")});var e=$("#example-progress-bar .bar");$("#example-progress-bar-button").click(function(){$(this).button("loading");var t=1;interval=setInterval(function(){e.css("width",t+"%");if(t>15)e.html(t*10+"/1000");if(t===33)e.removeClass("bar-danger").addClass("bar-warning");if(t===66)e.removeClass("bar-warning").addClass("bar-success");t++;if(t>100){clearInterval(interval);pbButton.html("Done!");e.html('<i class="icon-ok"></i>')}},50)})});
</script>
</body>
</html>